<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
<h2 align="center">My Orders</h2>
<style type="text/css">

    table {
        width: 700px;
        padding: 0;
        margin: 0 auto;
    }

    caption {
        padding: 0 0 5px 0;
        width: 700px;
        font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }

    th {
        font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #f5ba11;
        border-right: 1px solid #bfa986;
        border-bottom: 1px solid #bfa986;
        border-top: 1px solid #bfa986;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 6px 6px 6px 12px;
        background: #eee0c5 no-repeat;
    }

    td {
        border-right: 1px solid #bfa986;
        border-bottom: 1px solid #bfa986;
        background: #fff;
        font-size:16px;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
    }

</style>
<table>
    <tr>
        <th>Order ID</th>
        <th>Date</th>
        <th>Total Price</th>
    </tr>
        <tr th:each="order : ${orderList}">
            <td>
                <a th:href="${'/order/ViewOrder?orderId='}+${order.orderId}" name="orderId" value="${order.orderId}">
                    <th:block th:text="${order.orderId}" />
                   </a></td>
            <td>  <th:block th:text="${order.orderDate}" />
                </td>
            <td>  <th:block th:text="${order.totalPrice}" />
               </td>
        </tr>
</table>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>